<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='../../vue.js'></script>
</head>

<body>
    <pre>
        ☆☆☆☆☆：Vue在实例化使用，接管（挂载）的区域。就是最顶级的父元素，也被称之为根元素
        注意：(根元素有且只能有一个)



        ☆☆：组件使用的注意事项：
            1、data 必须是一个函数
            2、模板必须使用一个根元素，来进行包裹
            3、可以使用模板字符串，来定义页面结构，这样可以使结构看起来更加清晰
        ☆：组件命名的注意事项
            1、驼峰式的命名方式不能使用在页面挂载区域，只能在字符串模板中使用组件
                如果要在页面的标签中使用 则需要 用短横线的格式 来代替 驼峰式格式
    </pre>
    <div class="box">


        <w-zp></w-zp>


    </div>
    <script>
        Vue.component('w-zp', {
            data: function() {
                return {
                    name: 'wzp',
                    age: 25
                }
            },
            template: `
            <div>
                <p> <button @click="add"> 按钮 </button> </p>
                <p> {{ name }} </p>
                <p> {{ age }} </p>
                <wZp></wZp>
                <hr />
            </div>
            `,
            methods: {
                add() {
                    this.age--
                }
            }
        })
        Vue.component('wZp', {
            data: function() {
                return {
                    name: 'wzp',
                    age: 25
                }
            },
            template: `
            <div>
                <p> <button @click="add"> 按钮 </button> </p>
                <p> {{ name }} </p>
                <p> {{ age }} </p>
                <hr />
            </div>
            `,
            methods: {
                add() {
                    this.age--
                }
            }
        })
        var vm = new Vue({
            el: '.box',
            data: {}
        })
    </script>
</body>

</html>